<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-测量</title>
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #map {
                height: 100vh;
                width: 100vw;
            }
            #toolbar-wrapper1 {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 20px;
                left: 20px;
            }
            #toolbar-wrapper2 {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 80px;
                left: 20px;
            }
            .toolbar-item {
                background: #ffffff;
                border: 1px dashed #666666;
                text-align: center;
                font-size: 20px;
                line-height: 20px;
                height: fit-content;
                padding: 6px 16px;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map
                id="map"
                v-bind:access-token="accessToken"
                v-bind:map-style="mapStyle"
                v-bind:zoom="mapZoom"
                v-bind:center="outerCenter"
                v-bind:crs="mapCrs"
            >
                <mapgis-igs-tdt-layer
                    v-bind:layer-id="layerId"
                    v-bind:source-id="sourceId"
                    v-bind:baseURL="baseURL"
                    v-bind:token="token"
                    :crs="mapCrs"
                >
                </mapgis-igs-tdt-layer>
                <mapgis-draw
                    class="custom-draw-wrapper"
                    position="top-left"
                    v-bind:controls="controls"
                    v-on:added="handleAdded"
                    v-on:drawcreate="handleCreate"
                    ref="drawref"
                >
                    <div id="toolbar-wrapper1">
                        <div class="toolbar-item" v-on:click="togglePoint">画点</div>
                        <div class="toolbar-item" v-on:click="togglePolyline">画线</div>
                        <div class="toolbar-item" v-on:click="togglePolygon">画区</div>
                        <div class="toolbar-item" v-on:click="toggleDelete">删除</div>
                    </div>
                </mapgis-draw>
            </mapgis-web-map>
        </div>
        <script>
            var draw = new Vue({
                el: '#app',
                data() {
                    return {
                        accessToken: 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA', // 使用mapbox样式需要的秘钥
                        mapStyle: {
                            //设置版本号，一定要设置
                            version: 8,
                            //添加来源
                            sources: {},
                            //设置加载并显示来源的图层信息
                            layers: []
                        }, // 地图样式
                        mapZoom: 3, // 地图初始化级数
                        outerCenter: [130, 30], // 地图显示中心
                        mapCrs: 'EPSG:4326',

                        layerId: 'igsLayer_layerId',
                        sourceId: 'igsLayer_sourceId',
                        baseURL: 'http://t2.tianditu.gov.cn/vec_c/wmts', // 请求基地址
                        token: '2ddaabf906d4b5418aed0078e1657029', // 请求天地图的key值
                        controls: {
                            point: false,
                            line_string: false,
                            polygon: false,
                            trash: false,
                            combine_features: false,
                            uncombine_features: false
                        },
                        mode: undefined
                    };
                },
                methods: {
                    enableDrawer() {
                        const component = this.$refs.drawref;
                        if (component) {
                            component.enableDrawer();
                        }
                    },
                    handleAdded(e, data) {
                        var { drawer, map } = e;
                        this.drawer = drawer;
                    },
                    handleCreate(e) {
                        console.log('create', e);
                    },
                    togglePoint(e) {
                        this.enableDrawer();
                        this.drawer && this.drawer.changeMode('draw_point');
                    },
                    togglePolyline() {
                        this.enableDrawer();
                        this.drawer && this.drawer.changeMode('draw_line_string');
                    },
                    togglePolygon() {
                        this.enableDrawer();
                        this.mode = 'QueryByPolygon';
                        this.drawer && this.drawer.changeMode('draw_polygon');
                    },
                    toggleDelete() {
                        this.drawer && this.drawer.deleteAll();
                    }
                }
            });
        </script>
    </body>
</html>
